<template>
	<w-layout showNavbar navTitle="口令红包" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="$u.route('/pages/red_envelope/history')" class="op-70">
				记录
			</view>
		</template>
		<template #default>
			<view class="container">
				<view class="public-box-2 px-50 pt-100 pb-60" style="min-height: 560rpx;">
					<view class="color fs-36">
						<text>输入口令</text><text class="ml-10">领取红包</text>
					</view>
					<view class="public-input-1 px-30 py-25 mt-80 fr-ac-jsb" style="color: #fff;">
						<input v-model="state.command" class="fs-26 flex-1" type="text" placeholder="请输入口令" />
					</view>
					<view @click="get_receive_red_envelope" class="public-btn-3 transition px-30 py-25  t-c mt-60 mb-40">
						<view class="text-color-b fs-32">
							领取红包
						</view>
					</view>
					<view @click="popup.showGenerate = true" class="fr-ac-jc">
						<view class="mr-10 op-70 fs-26">
							生成口令
						</view>
						<image style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="public-box-3 px-50 py-50 mt-40" style="min-height: 750rpx;">
					<view class="color fs-36">
						<text>规则说明</text>
					</view>
					<view class="mt-30 op-70" style="line-height: 1.8;">
						<up-parse :content="state.content"></up-parse>
					</view>
				</view>
				
				
				<up-popup :show="popup.showGenerate" @close="popup.showGenerate=false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;min-height: 760rpx;position: relative;">
						<view class="fs-36">
							生成口令
						</view>
						<view class="mt-100">
							<view class="fr-ac">
								<view class="">
									金额
								</view>
								<view class="public-input-1 px-30 py-20 fr-ac-jsb flex-1 ml-50" style="color: #fff;">
									<input v-model="state.money" class="flex-1 fs-26" type="text" placeholder="请输入单个红包金额" />
								</view>
							</view>
							<view class="fr-ac mt-40">
								<view class="">
									数量
								</view>
								<view class="public-input-1 px-30 py-20 fr-ac-jsb flex-1 ml-50" style="color: #fff;">
									<input v-model="state.num" class="flex-1 fs-26" type="text" placeholder="请输入红包数量" />
								</view>
							</view>
							<view class="t-r mt-50">
								合计：需要消耗<text class="color">{{state.money}}</text> 个精粹
							</view>
						</view>
						
						<view @click="get_new_red_envelope" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								生成口令
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showCopy" @close="popup.showCopy=false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;min-height: 760rpx;position: relative;">
						<view class="fs-36">
							复制口令
						</view>
						<view class="mt-100 fc-ac">
							<view class="public-cover-1 t-c fs-40 px-100 py-25 w-fit color">
								{{state.password}}
							</view>
							<view class="mt-50">
								好友输入此口令可领取红包
							</view>
						</view>
						<view @click="copy(state.password);popup.showCopy = false" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								复制口令
							</view>
						</view>
					</view>
				</up-popup>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		copy
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		get_parse,
		receive_red_envelope,
		new_red_envelope
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_parseApi(2)
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const popup = reactive({
		showGenerate:false,
		showCopy:false,
	})
	
	const state = reactive({
		content: '',
		
		command: '',
		
		money:'',
		num:'',
		
		password:''
	})
	
	
	
	async function get_parseApi(type){
		const res = await get_parse({
			type
		})
		state.content = res
	}
	
	
	// 领取
	async function get_receive_red_envelope(type){
		const res = await receive_red_envelope({
			command:state.command
		})
		uni.$u.toast(`获得精粹x${res.userinfo.money}！`)
		state.command = ''
	}
	
	// 生成
	async function get_new_red_envelope(){
		const res = await new_red_envelope({
			money:state.money,
			num:state.num
		})
		state.password = res.password
		popup.showGenerate = false
		popup.showCopy = true
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>